<template>
	<view class="layout">
		<view class="navbar">
			<!-- 状态bar，只是为了设置高度 -->
			<view class="statusBar" :style="{height: getStatusBarHeight()+'px'}"></view>
			<view class="titleBar" :style="{height: getTitleBarHeight()+'px'}">
				<view class="title">{{title}}</view>
				<view class="search">
					<uni-icons class="icon" type="search" size="18"></uni-icons>
					<text class="text">搜索</text>
				</view>
			</view>
		</view>
		
		<view class="fill" :style="{height: getNavBarHeight()+'px'}"></view>
	</view>
</template>

<script setup>
	import { ref } from 'vue';
	import { getStatusBarHeight, getNavBarHeight, getTitleBarHeight } from '@/utils/system.ts';
	
	// 从父亲组件向子组件传值
	defineProps({
		title:{
			type: String,
			default: "壁纸"
		}
	})
	
	
	// let SYSTEM_INFO = uni.getSystemInfoSync()
	// // 在微信小程序中不知道为何获取不到状态条高度
	// let  statusBarHeightV = SYSTEM_INFO.statusBarHeight;
	
	// const statusBarHeight = ref(statusBarHeightV);
	// console.log(SYSTEM_INFO)
	// let {top, height} = uni.getMenuButtonBoundingClientRect()
	// let titleBarHeight = ref(height + (top - statusBarHeightV)*2)
	// console.log(titleBarHeight.value);
	// console.log("状态栏+标题栏高度：" + (statusBarHeightV + titleBarHeight.value))
</script>

<style lang="scss" scoped>
.layout {
	.navbar {
		position: fixed;
		left: 0;
		top: 0;
		width: 100%;
		z-index: 10;
		background: linear-gradient(to bottom, transparent, #fff 400rpx),
		linear-gradient(to right, #beecd8, #f4e2d8);
		.statusBar {
		}
		.titleBar {
			padding: 0 30rpx;
			display: flex;
			align-items: center;
			.title {
				font-size: 22px;
				font-weight: 700;
				color: $text-font-color-1;
			}
			.search {
				display: flex;
				align-items: center;
				width: 220rpx;
				height: 50rpx;
				border-radius: 60rpx;
				background: rgba(255, 255, 255, 0.4);
				margin-left: 30rpx;
				color: #999;
				font-size: 28rpx;
				
				.icon {
					padding-left: 5rpx;
				}
				.text {
					padding-left: 10rpx;
				}
			}
		}
	}
}
</style>
